<template>
  <!--出低价-->
  <el-dialog
    :close-on-click-modal="false"
    title="我要报价"
    :visible.sync="dialogVisible"
    width="500px">
    <div>
      <el-form size="mini" :model="sendForm" label-width="100px"  ref="sendForm" :rules="rules">
        <el-form-item label="报价:">
          <el-input ></el-input>
        </el-form-item>
        <el-form-item label="供货方:" prop="fromCompany">
          <el-select v-model="sendForm.fromCompany" @change="handleWarehouse">
              <el-option
                v-for = 'item in fromCompanyList'
                :label="item.fromCompanyName"
                :value="item.fromCompanyName"
                :key="item.fromCompanyId">
              </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发货仓库：" prop="warehouseName">
          <el-select v-model="sendForm.warehouseName">
            <el-option v-for="item in warehouseLists" :label="item.warehouseName" :value="item.warehouseId" :key="item.warehouseId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发货地" width="150"  prop='sendAreaId'>
          <el-cascader
            filterable
            clearable
            v-model="sendForm.sendAreaId"
            @change="handleCascaderChange"
            :props="{ value: 'areaId',label:'areaName',children:'children'}"
            :options="data2"></el-cascader>
          </el-form-item>
          <el-form-item label="发货时间" width="150"  prop='sendDate'>
            <el-date-picker
                v-model="sendForm.sendDate"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptions1"
                type="date"
                placeholder="选择日期时间">
              </el-date-picker>
          </el-form-item>
          <el-form-item
                label="交货方式"
                width="150"
                prop="sendTypes"
                >
                <el-radio-group v-model="sendForm.sendTypes">
                   <el-radio label="送到"></el-radio>
                   <el-radio label="自提"></el-radio>
                </el-radio-group>
          </el-form-item>
          <el-form-item
                label="结算方式："
                width="150"
                prop="payTypes"
                >
                <el-radio-group v-model="sendForm.payTypes">
                   <el-radio label="现金"></el-radio>
                   <el-radio label="承兑"></el-radio>
                </el-radio-group>
          </el-form-item>
        <el-form-item label="价格类型：" >
          <el-select v-model="sendForm.priceType">
              <el-option label="滞销"></el-option>
              <el-option label="紧俏"></el-option>
              <el-option label="平稳"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发货类型：">
          <el-select v-model="sendForm.deliveryType">
              <el-option label="采购发货"></el-option>
              <el-option label="客户自提"></el-option>
              <el-option label="公司发货"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注：">
          <el-input v-model="sendForm.priceRemark"></el-input>
        </el-form-item>

      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="handleConfirm" :loading="btnLoading">确 认</el-button>
    </span>
  </el-dialog>
</template>
<script>
import {warehouseList,getAreaList,getFromCompanyList} from '@/api/allInLine/inquiry'
import { mapGetters } from 'vuex'
import { Message } from 'element-ui';

const defaultSendForm={
    goodsDetailId : '', //规格商品ID
    sendAreaId : '',  //发货区域ID(修改时，非必填)
    fromCompany : "", //供货方
    warehouseName : "", //发货仓库
    stockNum : '',  //库存
    payTypes : "", //结算方式(修改时，非必填)
    purchasePrice : '', //采购底价
    sendDate : "", //发货日期
    sendTypes : "", //发货方式(修改时，非必填)
    buyMinNum : '', //起订量(修改时，非必填)
    priceType : "", //价格类型(滞销、紧俏、平稳)(修改时，非必填)
    priceRemark : "", //备注(修改时，非必填)
    deliveryType : "" //发货类型(公司发货、采购发货、客户自提)
};

export default {
  name: "index",
  data(){
    return {
      dialogVisible:true,
      btnLoading:false,
      sendForm:JSON.parse(JSON.stringify(defaultSendForm)),
      rules:{fromCompany:[{required:true,message:'选择供货方',}],
      warehouseName:[{required:true,message:'选择发货仓库'}],
      sendAreaId:[{required:true,message:'选择发货地'}],
      sendDate:[{required:true,message:'选择发货日期'}],
      sendTypes:[{required:true,message:'请选择发货方式'}],
      payTypes:[{required:true,message:'请选择交易方式               '}],
            },
      data:[],
      data2:[],
      dataLoading:false,
      pickerOptions1: {
                    disabledDate(time) {
                        return time.getTime() < Date.now()  - 8.64e7;
                    },
                },
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'mobile',
      'userId'
    ]),
  },
  components : {

  },
  created() {

  },
  filters: {

  },
  methods:{

    handleWarehouse(val){
      warehouseList({fromCompany:val}).then(res=>{
        this.warehouseLists = res.list
      })
    },

      // 发货公司列表
      fromCompanysList(){
      getFromCompanyList().then(res=>{
        this.fromCompanyList = res
      })
    },
    //显示我有低价
    showPop(item){
      this.dialogVisible = true;
      this.getAreaLists()
    },
    //关闭我有低价
    handleClose(){
      this.dialogVisible = false;
    },

    //确认低价
    handleConfirm(){
      const data = JSON.parse(JSON.stringify(this.sendForm))
      const data1 = {inquiryId:data.inquiryId,sendAreaId:data.sendAreaId,purchasePrice:data.purchasePrice,priceSendTypes:data.priceSendTypes,pricePayTypes:data.pricePayTypes,priceRemark:data.priceRemark}
      commitInquiryIntroduce(data1).then(res=>{
        Message.success('提交成功')
      }).catch(err=>{
        Message.error('提交失败')
      })
    },
     //获取地区列表
    getAreaLists(){
            this.dataLoading = true;
            getAreaList().then((res)=>{
                this.data = res;
                this.data2 = [];
                this.data2 = this.forTree(this.data);
                this.dataLoading = false;

            })
        },
      //去除不要的children
      forTree(list){
            let newList = list;
            if(newList.length){
                for (let i = 0; i<newList.length; i++){
                    if(newList[i].children && newList[i].children.length > 0){
                        this.forTree(newList[i].children)
                    }else{
                        delete newList[i].children;
                    }
                }
                return newList
            }
        },
      handleCascaderChange(){
        const data = this.sendForm.sendAreaId
      this.sendForm.sendAreaId = data[data.length-1] ? data[data.length-1] : ''
      }
  },


}
</script>

<style  lang="scss">

</style>
